import React, { Component } from'react';
import styles from './SystemDesktop.less';
import {
  Button,
  Card,
  Col,
  Row,
  Space,
  List
} from 'antd';
import {
  RightOutlined,
} from '@ant-design/icons';

import { ConfigProvider } from 'antd';

import zh_CN from 'antd/es/locale/zh_CN';


class SystemDesktop extends Component {

 constructor(){
  super();
  this.state={
    sysInfoloading: false,
    sysInfoData: [], // 消息列表
  }
 } 


  goToSysInfoList = () => {
    router.push('/');
  };
  render() {
    const {
      sysInfoloading,
      sysInfoData
      
    } = this.state;

    return (
      <div>
        <Row gutter={24}>

        {/* 消息通知 */}
        {<Col span={12}>
        <ConfigProvider locale={zh_CN}>
          <Card
            style={{ height: 390, overflow: 'auto' ,radius:0,border: '1px solid #e8e8e8'}}
            bordered
            title={
              <>
                <span className={styles['sys-des__block']}></span>
                <span className={styles['sys-des__title']}>消息通知</span>
              </>
            }
            extra={
              <Button onClick={this.goToSysInfoList}>
                查看更多 <Space><RightOutlined /></Space>
              </Button>
            }
            className={styles.mb24}
          >
            <List
              loading={sysInfoloading}
              itemLayout="vertical"
              dataSource={sysInfoData}
              renderItem={item => (
                <List.Item
                // extra={<span key={item.infoId}>{moment(item.receiveTime).format('YYYY-MM-DD HH:mm:ss')}</span>}
                >
                  <Row gutter={8}>
                    <Col span={16} className={styles.ellipsis} title={item.title}>
                      <Badge status={!item.status ? 'processing' : 'default'} />
                      {item.title}
                    </Col>
                    <Col span={8} className={[styles.ellipsis, styles.textRight].join(' ')}>
                      <span key={item.infoId}>
                        {moment(item.receiveTime).format('YYYY-MM-DD HH:mm:ss')}
                      </span>
                    </Col>
                  </Row>
                </List.Item>
              )}
            />
            </Card>
          </ConfigProvider>
        </Col>}
        </Row>
      </div>
    );
  }
}
export default SystemDesktop;